<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>动态渲染轮播图</title>
    </head>
    <style>
        .all {
            margin: auto;
            height: 300px;
            width: 400px;
            font-size: 50px;
            position: relative;
        }
        img {
            width: 400px;
            height: 300px;
            position: absolute;
            top: 0;
        }
        all > img:first-of-type {
            z-index: 1;
        }
        ul {
            width: 400px;
            list-style: none;
            display: flex;
            justify-content: space-around;
            position: absolute;
            bottom: -20px;
            padding: 0;
        }
        li {
            z-index: 2;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(108, 108, 108, 0.2);
        }
        p {
            width: 50px;
            height: 60px;
            z-index: 2;
            position: absolute;
            top: 22%;
            cursor: pointer;
        }
        .all > p:last-of-type {
            position: absolute;
            top: 22%;
            right: 0;
        }
    </style>
    <body>
        <div class="all">
            <!-- <img src="https://project-students-cms-1251395798.cos.ap-nan…690171053017_c9ae8eed2e7b38f3d5eec59c487b7ee0.jpg" alt=""> -->
            <p>&lt;</p>
            <p>&gt;</p>
            <ul>
                <!-- <li></li>
           <li></li>  -->
            </ul>
        </div>
    </body>
</html>
